<template>
  <view>
    <view class="message-list-container">
      <view
        class="message-header"
        style="display: flex; justify-content: space-between"
      >
        <view>
          <text class="header-title">我的{{ pageTitle }}</text>
          <text class="header-count">{{ state.count }} 条{{ pageTitle }}</text>
        </view>
        <view>
          <view
            class="bottom-action"
            @click="handleShowComment()"
            v-if="state.type == 1"
          >
            发布找人
          </view>
        </view>
      </view>
      <scroll-view
        class="function-scroll"
        scroll-y
        @scrolltolower="buttonScrolltolower"
        style="height: calc(100vh - 55px)"
      >
        <view class="message-list">
          <view
            class="message-item"
            v-for="(item, index) in dataList"
            :key="index"
            :class="{ 'last-item': index == dataList.length - 1 }"
            @click="dataListClick(item)"
          >
            <view class="user-info">
              <view
                class="avatar"
                :style="{
                  backgroundColor: stringToColor(item.company_name || ''),
                }"
              >
                <text class="avatar-text">
                  {{
                    (item.company_name && item.company_name.charAt(0)) || "--"
                  }}
                </text>
              </view>

              <view class="user-detail">
                <view
                  class="username"
                  style="font-size: 30rpx; font-weight: bolder"
                >
                  {{ item.title || "--" }}
                </view>
                <view class="username">
                  {{ item.company_name || "--" }}
                  <text v-if="state.type == 2 && item.company_name">
                    ({{ item.username || "--" }})
                  </text>
                </view>
                <text
                  class="username"
                  :class="
                    item.status == 1 ? 'status-active' : 'status-inactive'
                  "
                  >{{ item.status == 1 ? "正在找人" : "停止找人" }}</text
                >
                <text
                  class="username"
                  style="margin-left: 8px"
                  v-if="item.audit_status != 2"
                  :class="
                    item.audit_status == 3 ? 'status-error' : 'status-active'
                  "
                  >{{ item.audit_status_name }}</text
                >
              </view>
            </view>

            <view class="message-content">
              <view class="tags-list">
                <view
                  class="tag-item"
                  v-for="(tag, index) in item.sys_label_name?.split('，') || []"
                  :key="index"
                >
                  {{ tag ? tag : "--" }}
                </view>
              </view>
              <view class="time">{{
                item.created_at ? item.created_at : "--"
              }}</view>
            </view>
          </view>

          <!-- 空状态 -->
          <u-empty
            mode="data"
            :text="`暂无${pageTitle}`"
            v-if="dataList.length == 0"
            marginTop="50%"
            :icon="getResource('img/phone/mini/no_data.png')"
          />
        </view>
      </scroll-view>
    </view>
    <liuYanPing :showCommentPopup="showCommentPopup" @UpClose="UpClose" />
  </view>
</template>
<script setup>
import { reactive, toRefs, onMounted, computed, ref } from "vue";
import { onShow, onLoad } from "@dcloudio/uni-app";
import { getResource } from "@/utils/Resource";
import { getZhaoPin, GetZhaoPinBaoIndexBaoSelf } from "@/api/news.js";
import { showLoading, showToast } from "@/utils/toast";
const state = reactive({
  isReplyMode: false,
  replyTarget: null,
  showCommentPopup: false,
  count: 0,
  type: "",
  form: {
    page_no: 1,
    page_size: 10,
    page_count: 1,
    type: "self",
  },
  dataList: [],
});
const { dataList, form, showCommentPopup } = toRefs(state);
const pageTitle = computed(() => {
  return state.type == 1 ? "找人" : "报名";
});

onMounted(async () => {
  // await init();
});
onLoad(async (e) => {
  if (e.type) {
    // console.log(e.type);
    state.type = e.type;
  }
  uni.setNavigationBarTitle({
    title: state.type == 1 ? `我的找人` : `我的报名`,
  });
});
onShow(async () => {
  dataList.value = [];
  if (state.type == 2) {
    console.log("进来了");
    await second();
  } else {
    await init();
  }
});
const init = async () => {
  try {
    const res = await getZhaoPin(form.value);
    state.count = res.data.count;
    dataList.value = [...dataList.value, ...res.data.list];
    console.log(dataList.value);

    // console.log(res);
  } catch (error) {}
};
const second = async () => {
  try {
    const res = await GetZhaoPinBaoIndexBaoSelf(form.value);
    state.count = res.data.count;
    dataList.value = [...dataList.value, ...res.data.data];
    console.log(dataList.value);
  } catch (error) {}
};
const stringToColor = (str) => {
  let hash = 0;
  for (let i = 0; i < str.length; i++) {
    hash = str.charCodeAt(i) + ((hash << 5) - hash);
  }
  const c = (hash & 0x00ffffff).toString(16).toUpperCase();
  return `#${"00000".substring(0, 6 - c.length)}${c}`;
};
const dataListClick = (e) => {
  if (state.type == 2) {
    uni.navigateTo({
      url: `/pages/user/component/recruit/recruitItem?id=${e.id}&type=1`,
    });
    // uni.navigateTo({
    //   url: `/pages/user/mycomponinfo?company_type=2&id=${e.wechat_user_id}`,
    // });
  } else {
    uni.navigateTo({
      url: `/pages/user/component/recruit/recruitItem?id=${e.id}`,
    });
  }
};
const handleShowComment = () => {
  uni.navigateTo({
    url: "/pages/user/component/recruit/recruitForm",
  });
};
const UpClose = async () => {
  showCommentPopup.value = false;
};
const buttonScrolltolower = async () => {
  if (state.count != dataList.value.length) {
    form.value.page_no++;
    showLoading("加载中");
    await init();
  } else {
    showToast("已经最后一页了~");
  }
};
</script>

<style lang="scss" scoped>
.message-list-container {
  // min-height: 100vh;
  background-color: #f5f7fa;
  // padding-bottom: 120rpx;
}

.message-header {
  padding: 30rpx 20rpx;
  background-color: white;
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: space-between;

  .header-title {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
  }

  .header-count {
    margin-left: 15rpx;
    font-size: 26rpx;
    color: #999;
  }
}

.bottom-action {
  background-color: #137ad3;
  color: white;
  border: none;
  border-radius: 20px;
  padding: 5px 16px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-left: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

  &:hover {
    background-color: #40a9ff;
    transform: translateY(-1px);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
  }

  &:active {
    background-color: #096dd9;
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  }
}
// 横向滚动容器
.function-scroll {
  width: 100%;
  //padding: 0 20rpx; // 左右留出边距
  box-sizing: border-box;
}

.message-list {
  padding: 20rpx;

  .message-item {
    background-color: white;
    border-radius: 16rpx;
    padding: 25rpx;
    margin-bottom: 20rpx;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);

    &.last-item {
      margin-bottom: 0;
    }
    .user-info {
      display: flex;
      align-items: center;
      margin-bottom: 20rpx;

      .avatar {
        width: 70rpx;
        height: 70rpx;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 20rpx;

        .avatar-text {
          color: white;
          font-size: 32rpx;
          font-weight: bold;
        }
      }

      .user-detail {
        .username {
          padding: 6rpx 16rpx;
          border-radius: 16rpx;
          font-size: 22rpx;
          font-weight: 400;

          &.status-active {
            background-color: rgba(74, 144, 226, 0.1);
            color: #4a90e2;
          }
          &.status-error {
            background-color: rgb(255 5 5);
            color: white;
          }
          &.status-inactive {
            background-color: rgba(153, 153, 153, 0.1);
            color: #999;
          }
        }
      }
    }
  }
  .message-content {
    .tags-list {
      display: flex;
      flex-wrap: wrap;
      gap: 12rpx; // 标签间距
      flex: 1;
      .tag-item {
        padding: 8rpx 20rpx;
        background-color: #f0f5ff;
        color: #4a90e2;
        border-radius: 16rpx;
        font-size: 22rpx;
      }
    }
    .time {
      margin-top: 10px;
      font-size: 24rpx;
      color: #999;
    }
  }
}
</style>
